<template>
	<el-row :infinite-scroll-distance='10' infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="background: #f3f6fa;">
		<el-row style="margin: 0vh vw 0px 10vw;">
			<!-- 轮播 -->
			<el-row>
				<el-carousel height="560px" :interval='2000' direction="vertical" autoplay>
					<el-carousel-item v-for="(item,index) in el_carousel_list" :key="index">
						<el-image fit="fill" :src="item.src"></el-image>
					</el-carousel-item>
				</el-carousel>
			</el-row>
			<!-- 无限极 -->
			<el-row class="to">
				<el-row v-for="(item,index) in el_radio_group_list" :key="index" class="to-listbox">
					<el-row class="to-listbox-list" type="flex">
						<el-col class="to-listbox-list-title" :span="2">
							{{item.title}}:
						</el-col>
						<el-col :span="22">
							<el-radio-group @input='res=>radio_input(res,item.id)' v-model="item.group.model">
								<el-radio-button v-for="(items,indexs) in item.group.list" :key="indexs"
									:label="items.label">
									{{items.title}}
								</el-radio-button>
							</el-radio-group>
						</el-col>
					</el-row>
					<el-divider></el-divider>
				</el-row>
			</el-row>
			<!-- 拍卖品主题 -->
			<el-row class="EntryPage-main">
				<el-row>
					<el-col class='EntryPage-main-card' :span="5" v-for="(item, index) in card_list" :key="index"
						:offset="index > 0 ? 1 : index > 4 ? 0 : 1">
						<el-card :body-style="{ padding: '0px' }">
							<img :src="item.src" class="image">
							<div :data-attr="item.endtime + '结束'" class="bin">
								<div class="title">{{item.title}}</div>
								<div class="bottom clearfix">
									<span class="price">
										<span>{{$money}}</span>
										<span>{{item.price}}</span>
									</span>
									<el-button @click="ToDetails(item.id)" type="text" class="button">进入现场</el-button>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-row style="margin: 10px 0px;color: #b1b1b1;">
					<el-col v-if="loading" class="y_flex y_flex_ju_cen">
						<span >加载中...</span>
						<i style="color: #b1b1b1;" class="el-icon-loading"></i>
					</el-col>
					<el-col v-if="noMore" class="y_flex y_flex_ju_cen">
						<p >-- 没有更多了 --</p>
					</el-col>
				</el-row>
			</el-row>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				count: 0,
				loading: false,
				card_list: [], //拍卖品列表
				el_carousel_list: [], //轮播
				el_radio_group_list: [], //无限极
			}
		},
		computed: {
			noMore() { // 懒加载最大次数
				return this.card_list.length >= 40
			},
			disabled() { //是否禁用
				return this.loading || this.noMore
			},
		},
		created() {
			this.data_init()
		},
		mounted() {
		},
		methods: {
			async radio_input(res, id) { //无限极触发事件
				/* 
					res:radio.button的身份码回调,
					id:radio的身份码
				 */
				let data = await this.radio_input_data_simulation(res, id)
				switch(id){
					case 1:
					this.el_radio_group_list = data
					break
					case 2:
					this.card_list = data
					break
				}
			},
			//radio_input 数据模拟上
			radio_input_data_simulation(res, id) {
				return new Promise(resolve => {
					setTimeout(_ => {
						switch (id) {
							case 1:
								resolve(this.ra1())
								break
							case 2:
								resolve(this.ra2())
								break
						}
					}, 300)
				})
			},
			ra1(){
				let list = [
					{
						id: 1,
						group: {
							model: 1,
							list: [{
									label: 1,
									title: '上海'
								},
								{
									label: 2,
									title: '贵州'
								}
							]
						},
						title: '拍卖品批次'
					},
					{
						id: 2,
						group: {
							model: 1,
							list: [{
									label: 1,
									title: '长沙'
								},
								{
									label: 2,
									title: '合肥'
								},
								{
									label: 3,
									title: '武汉'
								},
								{
									label: 4,
									title: '西安'
								}
							]
						},
						title: '拍卖品类型'
					},
				]
				return list
			},
			ra2(){
				  var list = []
				  for (let i = 0; i < 11; i++) {
				  	list.push({
				  		id: i + 1,
				  		price: 2000 + i + 200,
						endtime:'11月10日 22:20',
				  		src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
				  		title: '【免交保】精选95新 积家男表 公价85500 国检保真 品相佳 大师 月相 自动机械手表',
				  	})
				  }
				  return list
			},
			//radio_input 数据模拟下
			ToDetails(id) { //跳转到拍品详情
				this.$router.push('/ListItem/ParticularIng?id=' + id)
			},
			load() { //懒加载
				this.loading = true
				setTimeout(() => {
					var list = []
					for (let i = 20; i < 29; i++) {
						var form = {
							id: i + 1,
							price: 2000 + i + 200,
							endtime:'11月10日 22:20',
							src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '【免交保】精选95新 积家男表 公价85500 国检保真 品相佳 大师 月相 自动机械手表',
						}
						list.push(form)
					}
					this.card_list = [...this.card_list, ...list]
					this.loading = false
				}, 2000)

			},
			//初始化数据 上
			data_init() { //初始化所有数据入口
				this.el_radio_group_list_DataInit()
				this.el_carousel_list_DataInit()
				this.card_list_DataInit()
			},
			card_list_DataInit() {
				var list = []
				for (let i = 0; i < 20; i++) {
					list.push({
						id: i + 1,
						price: 2000 + i + 200,
						endtime:'11月10日 22:20',
						src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
						title: '【免交保】精选95新 积家男表 公价85500 国检保真 品相佳 大师 月相 自动机械手表',
					})
				}
				this.card_list = list
			},
			el_radio_group_list_DataInit() {
				this.el_radio_group_list = [
					{
						id: 1,
						group: {
							model: 1,
							list: [{
									label: 1,
									title: '上海'
								},
								{
									label: 2,
									title: '贵州'
								}
							]
						},
						title: '拍卖品批次'
					},
					{
						id: 2,
						group: {
							model: 1,
							list: [{
									label: 1,
									title: '长沙'
								},
								{
									label: 2,
									title: '合肥'
								}
							]
						},
						title: '拍卖品类型'
					},
				]
			},
			el_carousel_list_DataInit() {
				this.el_carousel_list = [{
						src: 'https://img10.360buyimg.com/paimai/jfs/t1/170991/9/32351/49712/63719651E3ce74e7f/4046612b7ddd8ea4.png!q90',
						puth: '1'
					},
					{
						src: 'https://img10.360buyimg.com/paimai/jfs/t1/170991/9/32351/49712/63719651E3ce74e7f/4046612b7ddd8ea4.png!q90',
						puth: '1'
					},
					{
						src: 'https://img10.360buyimg.com/paimai/jfs/t1/170991/9/32351/49712/63719651E3ce74e7f/4046612b7ddd8ea4.png!q90',
						puth: '1'
					}
				]
			}
			//初始化数据 下
		}
	}
</script>


<style lang="scss" scoped>
	@import 'EntryPage.scss'
	
</style>
